<template>
  <el-dialog
    v-dialogDrag
    :title="params.title"
    :visible.sync="params.visible"
    :width="params.width || '550px'"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :label-width="params.labelWidth || '80px'"
    >
      <el-form-item
        v-for="(item, index) in formList"
        :key="item.label"
        :label="item.label"
      >
        <el-input
          v-if="textType.indexOf(item.type) != -1"
          :ref="item.name + index"
          v-model.trim="item.value"
          :type="item.type"
          :placeholder="`请输入${item.label}`"
          size="mini"
          :maxlength="item.maxlength"
          :clearable="item.type != 'password'"
          :show-password="item.type == 'password'"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <dialog-btn />
    </div>
  </el-dialog>
</template>
<script>
/*
  label,value,name,type,verify为单个输入框定制
  需要渲染多行请使用formList
  注意：formList有值会覆盖单个
*/
export default {
  name: 'InputDialog',
  props: {
    params: {
      type: Object,
      default() {
        return {
          title: '输入框', // 当前窗口标题
          visible: true, // 是否显示当前窗口
          width: '30%', // 当前窗口显示宽度
          labelWidth: '80px', // 表单提示信息大小
          label: '默认', // 单个输入框提示信息
          value: '', // 单个输入框值
          name: 'name', // 单个输入框key
          type: 'text', // 单个输入框类型（不传默认为text）
          maxlength: 500, // 单个输入框限制长度
          verify: '', // 单个输入框校验（看data的verify）
          // 自定义多个
          formList: [
            { label: '名称', value: '分组名称', name: 'name' },
            { label: '密码', value: '123456', name: 'pwd', type: 'password' },
            {
              label: '描述',
              value: '分组描述',
              name: 'desc',
              type: 'textarea'
            }
          ]
        }
      }
    }
  },
  data() {
    return {
      formList: [],
      textType: [undefined, 'text', 'password', 'number', 'textarea'], // 可显示类型，用于后面扩展单选或多选框等
      // 校验
      verify: {
        // 非空
        required: {
          v: /\S/,
          s: `{0}不能为空!`
        },
        // 手机
        phone: {
          v: /^(0|86|17951)?(13[0-9]|15[012356789]|17[01678]|18[0-9]|14[57])[0-9]{8}$/,
          s: '{0}需输入正确的手机号码!'
        },
        // 数字
        number: {
          v: /^[0-9]+$/,
          s: '{0}需输入数字'
        },
        // 邮箱
        email: {
          v: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
          s: '{0}需输入正确的邮箱地址!'
        },
        // IP地址
        ip: {
          v: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/,
          s: '{0}需输入正确的IP地址!'
        }
      }
    }
  },
  watch: {
    // 兼容之前没有使用v-if写法
    'params.visible': function(value) {
      if (value) {
        Object.assign(this.$data, this.$options.data())
        this.initWindow()
      }
    }
  },
  created() {
    this.initWindow()
  },
  methods: {
    initWindow() {
      const { label, name, value, maxlength, verify, type, formList = [] } = this.params
      // 单个或多个不传则关闭
      if (label === '' || !formList) {
        this.params.visible = false
        return this.$message({ message: '参数错误!', type: 'warning' })
      }
      // 当前label有值则转换
      if (label) {
        this.formList.push({
          type: type,
          label: label,
          value: value ?? '',
          maxlength: maxlength ?? 500,
          name: name ?? 'name',
          verify: verify ?? 'required'
        })
      }
      // 有值则覆盖
      if (formList.length > 0) {
        this.formList = formList
      }
    },
    confirm() {
      const data = {}
      for (let i = 0; i < this.formList.length; i++) {
        const { name, value = '', label, verify = '' } = this.formList[i]
        const verifyList = verify.split('|')
        for (let j = 0; j < verifyList.length; j++) {
          const item = verifyList[j]
          if (this.verify[item] && !this.verify[item].v.test(value)) {
            this.$message({
              message: this.Global.strFormat(this.verify[item].s, label),
              type: 'warning'
            })
            return false
          }
        }
        data[name] = (value || undefined)
      }
      // 如果当前传入回调则使用回调
      if (this.params.confirm !== undefined) {
        this.params.confirm(data)
      } else {
        this.$emit('confirm', data)
      }
    }
  }
}
</script>
